@scrollbar-width: 8px;

.scrollbar {
    &-container {
        position: relative;
        overflow: hidden;
        height: 100%;
    }

    &-bar {
        position: absolute;
        top: 0;
        right: 0;

        width: @scrollbar-width;
        height: 100%;

        &:hover {
            .scrollbar-bar-thumb:not(:active) {
                background-color: rgb(var(--scrollbar-color-hover));
            }
        }

        &-thumb {
            position: absolute;
            width: calc(100% - 2px);
            background-color: rgb(var(--scrollbar-color));
            border-radius: var(--border-radius-lg);

            &:active {
                background-color: rgb(var(--scrollbar-color-active));
            }
        }
    }

    &-content {
        scrollbar-width: none;

        overflow: auto;

        box-sizing: border-box;
        height: 100%;
        padding-right: @scrollbar-width;

        &::-webkit-scrollbar {
            display: none;
        }
    }
}
